<template>
  <view class="template-content" v-if="show">
    <view class="tn-margin tn-text-center">
      <view class="load">
        <image src="https://seerh5.61.com/resource/assets/PetType/52.png"></image>
        <image src="https://seerh5.61.com/resource/assets/PetType/95.png"></image>
        <image src="https://seerh5.61.com/resource/assets/PetType/100.png"></image>
        <image src="https://seerh5.61.com/resource/assets/PetType/108.png"></image>
      </view>
    </view>
  </view>
</template>
<script setup>
  const props = defineProps({
    show: Boolean
  })
</script>
<style scoped lang="scss">
  .template-content {
    height: 100vh;
    width: 100%;
  }

  /* 加载 */
  .load {
    position: absolute;
    top: 50%;
    left: 42%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    z-index: 99999;
  }

  .load image {
    border: 0;
    margin: 0;
    width: 40%;
    height: 40%;
    position: absolute;
    border-radius: 50%;
    animation: spin 2s ease infinite;
    z-index: 99999
  }

  .load :first-child {
    animation-delay: -1.5s
  }

  .load :nth-child(2) {
    animation-delay: -1s
  }

  .load :nth-child(3) {
    animation-delay: -0.5s
  }

  @keyframes spin {
    0%, 100% {
      transform: translate(0)
    }
    25% {
      transform: translate(160%)
    }
    50% {
      transform: translate(160%, 160%)
    }
    75% {
      transform: translate(0, 160%)
    }
  }
</style>
